<!DOCTYPE html>
<html lang="en">
<title>修改标准课程</title>
<#import "/layout/layout.html" as body/>
<@body.page>

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title overflow">
                    <h5 class="pull-left">添加新类别</h5>
                </div>
                <div class="ibox-content">
                    <form method="post" class="form-horizontal" enctype="multipart/form-data" name="updateForm"
                          id="updateForm">
                        <input type="hidden" name="id" value="${courseStandard.id!}">
                        <div class="form-group"><label class="col-sm-2 control-label">类别名称</label>
                            <div class="col-sm-10"><input type="text" class="form-control" id="name" name="name" value="${courseStandard.name!}"></div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group"><label class="col-sm-2 control-label">主管教练</label>
                            <div class="col-sm-10">
                                <select class="form-control m-b chosen-select" id="manager" name="manager"
                                        data-placeholder="请选择上课教练..." tabindex="2">
                                    <#if coachList??>
                                        <#list coachList as coach>
                                            <option value="${coach.id!}">${coach.nickName!}</option>
                                        </#list>
                                    </#if>
                                </select>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">类别介绍文字</label>

                            <div class="col-sm-10">
                                <textarea class="form-control" rows="5" id="introduce" name="introduce">${courseStandard.introduce!}</textarea>
                                <span class="help-block m-b-none">字数不超过600汉字；可分段描述
                                        <i class="pull-right" id="introduce-l">0/600</i>
                                    </span>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">适合人群</label>

                            <div class="col-sm-10">
                                <textarea class="form-control" rows="3" id="crowd" name="crowd">${courseStandard.crowd!}</textarea>
                                <span class="help-block m-b-none">字数不超过100汉字；可分段描述
                                        <i id="crowd-l" class="pull-right">0/100</i>
                                    </span>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group"><label class="col-sm-2 control-label">属性标签</label>
                            <input id="courseAttr" name="courseAttr" value="${courseStandard.courseAttr!}" type="hidden">
                            <div class="col-sm-10">
                                <div id="magicsuggest"></div>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group"><label class="col-sm-2 control-label">视频链接</label>

                            <div class="col-sm-10"><input type="text" class="form-control" id="link" name="link" value="${courseStandard.link!}"></div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">视频封面图</label>
                            <div class="col-sm-10">
                                <div id="video_preview" style="min-height: 230px;" class="dropzone">
                                    <input type="hidden" id="url" name="url" value="${courseStandard.url!}">
                                    <div class="dropzone-previews"></div>
                                </div>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group"><label class="col-sm-2 control-label">类别硬照</label>

                            <div class="col-sm-10">
                                <div id="category_pic" style="min-height: 230px;" class="dropzone">
                                    <input type="hidden" id="categoryPic" name="categoryPic" value="${courseStandard.categoryPic!}">
                                    <div class="dropzone-previews"></div>
                                </div>
                                <div class="m text-left">
                                    <small>大小不能超过1.5M;必须大于两张，且总数为偶数。</small>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="ibox-content overflow">
                    <div class="col-sm-12">
                        <button type="button" class="btn btn-default pull-left" onclick="goBackList()">取消添加</button>
                        <button type="button" class="btn btn-primary pull-right" onclick="formSubmit()">确认修改</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--upload-->
<script type="text/javascript" src="${baseUrl}js/upload/promise.min.js"></script>
<script type="text/javascript" src="${baseUrl}js/upload/aliyun-oss-sdk.min.js"></script>
<script type="text/javascript" src="${baseUrl}js/upload/webToOss.js"></script>

<script src="${baseUrl}js/plugins/dropzone/dropzone.js"></script>
<link href="${baseUrl}css/plugins/magicsuggest/magicsuggest-min.css" rel="stylesheet">
<script>
    var dictArr = new Array();
    var dataDictList = ${dataDictList!};
    var videoLinkPicList = new Array();//视频封面
    var categoryPicList = new Array();//硬别类照
    var myDropzone2;
    var myDropzone3;

    //返回列表
    function goBackList() {
        window.location = "to_course_standard_list";
    }
    //保存
    function formSubmit() {
        debugger
        var isCheck = true;
        //校验表单
        if ($("#name").val().length <= 0) {
            swal("错误!", "请先填写类别名称!", "error");
            isCheck = false;
            return false;
        }
        if ($("#introduce").val().length <= 0) {
            swal("错误!", "请先填写类别介绍文字!", "error");
            isCheck = false;
            return false;
        }
        $('#courseAttr').val(dictArr.toString());
        if ($("#courseAttr").val().length <= 0) {
            swal("错误!", "请先选择属性标签!", "error");
            isCheck = false;
            return false;
        }
//            if($("#link").val().length<=0) {
//                swal("错误!", "请先输入视频链接!", "error");
//                isCheck = false;
//                return false;
//            }
        $("#url").val(videoLinkPicList.join(","));
        if (videoLinkPicList.length > 0 && videoLinkPicList.length != 1) {
            swal("错误!", "请先确定上传1张数量的视频封面图!", "error");
            isCheck = false;
            return false;
        }
        $("#categoryPic").val(categoryPicList.join(","));
        if ($("#categoryPic").val().length <= 0) {
            swal("错误!", "请先上传类别硬照!", "error");
            isCheck = false;
            return false;
        } else {
//            if ($("#categoryPic").val().split(",").length % 2 != 0) {
//                swal("错误!", "请先上传偶数量的类别硬照!", "error");
//                isCheck = false;
//                return false;
//            }
        }
        if (!isCheck) {
            return false;
        }
        var param = $("#updateForm").serialize();
        //提交保存数据
        $.ajax({
            type: "post",
            url: "course_standard_save",
            data: param,
            success: function (data) {
                if (data == "success") {
                    swal("保存成功!", "页面即将重新加载,请稍后...", "success");
                    window.setTimeout(function () {
                        window.location = 'to_course_standard_list';
                    }, 1000);
                } else {
                    swal("保存失败!", "...", "error");
                }
            }
        });

    }
    $(document).ready(function () {
        var ms;
        if ($('#courseAttr').val().trim().length <= 0) {
            ms = $('#magicsuggest').magicSuggest({
                data: dataDictList,
                placeholder: '请输入搜索或选择',
                required: true,
                expandOnFocus: true,
                strictSuggest: true,
                displayField: 'dictName',
                valueField: 'dictName'
            });
        } else {
            ms = $('#magicsuggest').magicSuggest({
                data: dataDictList,
                placeholder: '请输入搜索或选择',
                required: true,
                expandOnFocus: true,
                strictSuggest: true,
                displayField: 'dictName',
                valueField: 'dictName',
                value: $('#courseAttr').val().split('#')
            });
            dictArr = ms.getValue();
        }

        $(ms).on('selectionchange', function () {
            console.log('DATA---->>' + JSON.stringify(this.getValue()));
            dictArr = this.getValue();
        });


        // Multi select//属性标签
//            var config = {
//                '.chosen-select': {},
//                '.chosen-select-deselect': {
//                    allow_single_deselect: true
//                },
//                '.chosen-select-no-single': {
//                    disable_search_threshold: 10
//                },
//                '.chosen-select-no-results': {
//                    no_results_text: 'Oops, nothing found!'
//                },
//                '.chosen-select-width': {
//                    width: "95%"
//                }
//            };
//            for (var selector in config) {
//                $(selector).chosen(config[selector]);
//            }
        var courseStandardJson = ${courseStandardJson};
        if (courseStandardJson.manager) {
            $("#manager").val(courseStandardJson.manager).trigger("chosen:updated");
        }
        if (courseStandardJson.standCourse && courseStandardJson.standCourse.length > 0) {
            var caArr = $("#courseAttr option");
            var cJCa = courseStandardJson.standCourse.split("#");
            for (var i = 0; i < caArr.length; i++) {
                for (var m = 0; m < cJCa.length; m++) {
                    if (cJCa[m].indexOf(caArr[i].innerText) >= 0) {
                        $("#courseAttr option[value=" + cJCa[m] + "]").attr('selected', true);
                    }
                }
            }
            $("#courseAttr").trigger("chosen:updated");
        }

        //视频封面图
        Dropzone.autoDiscover = false;
        myDropzone2 = new Dropzone("#video_preview", {
            url: "upload_pic",
            uploadMultiple: false,
            addRemoveLinks: true,
            dictDefaultMessage: "将文件拖到此处上传",
            dictFileTooBig: "文件过大",
            dictCancelUpload: "取消上传",
            dictRemoveFile: "移除文件",
            dictMaxFilesExceeded: "超过上传文件数量限制",
            maxFiles: 1,
            maxFilesize: 10.5,
            acceptedFiles: ".jpg,.jpeg,.png",
            method: 'post',
            filesizeBase: 1024,

            init: function () {
                var url = $("#url").val();
                if (!url || url.length <= 0) {
                    url = "";
                } else {
                    var larr = url.split(",");
                    if (larr.length > 0) {
                        for (var i = 0; i < larr.length; i++) {
                            videoLinkPicList.push(larr[i]);
                        }
                    }
                }
                this.emit("initimage", url);
                this.on("error", function (file, response, XMLHttpRequest) {
                    debugger
                    swal("图片上传异常!", "图片服务器出错,即将清除无效图片,请稍后重新上传...", "error");
                    window.setTimeout(function () {
                        $('#video_preview .dz-image-preview.dz-error').remove()
                    }, 1000);
                });
                this.on("success", function (file, response, e) {
                    if (response.error) {
                        $(file.previewTemplate).children('.dz-error-mark').css('opacity', '1')
                    } else {
                        videoLinkPicList.push(response.url);
                    }
                });
                this.on("sending", function (file, xhr, formData) {
                    formData.append("filesize", file.size);
                });
                this.on("removedfile", function (file) {

                    var responseJson = null;
                    if (file && file.xhr && file.xhr.responseText) {
                        responseJson = $.parseJSON(file.xhr.responseText);
                    }
                    if (responseJson) {
                        $.each(videoLinkPicList, function (i, data) {
                            if (videoLinkPicList[i].indexOf(responseJson.url) > -1) {
                                videoLinkPicList.splice(i, 1);
                            }
                        });
//                            $.post("delete_pic", {fileName: responseJson.url}, function (result) {
//                                if (result) {
//                                    console.log(responseJson.url + '删除成功');
//                                }
//                            });
                    }
                    if (file.name.length > 0) {
                        for (var i = 0; i < videoLinkPicList.length; i++) {
                            if (videoLinkPicList[i].indexOf(file.name) > -1) {
                                videoLinkPicList.splice(i, 1);
                                break
                            }
                        }
                        console.log("文件 " + file.name + " 被移除");
                    }
                });
            }
        });

        //类别硬照
        myDropzone3 = new Dropzone("#category_pic", {
            url: "upload_pic",
            uploadMultiple: false,
            addRemoveLinks: true,
            dictDefaultMessage: "将文件拖到此处上传",
            dictFileTooBig: "文件过大",
            dictCancelUpload: "取消上传",
            dictRemoveFile: "移除文件",
            maxFilesize: 10.5,
            acceptedFiles: ".jpg,.jpeg,.png",
            method: 'post',
            filesizeBase: 1024,

            init: function () {
                var url = $("#categoryPic").val();
                if (!url || url.length <= 0) {
                    url = "";
                } else {
                    var larr = url.split(",");
                    if (larr.length > 0) {
                        for (var i = 0; i < larr.length; i++) {
                            categoryPicList.push(larr[i]);
                        }
                    }
                }
                this.emit("initimage", url);
                this.on("error", function (file, response, XMLHttpRequest) {
                    debugger
                    swal("图片上传异常!", "图片服务器出错,即将清除无效图片,请稍后重新上传...", "error");
                    window.setTimeout(function () {
                        $('#category_pic .dz-image-preview.dz-error').remove()
                    }, 1000);
                });
                this.on("success", function (file, response, e) {
                    if (response.error) {
                        $(file.previewTemplate).children('.dz-error-mark').css('opacity', '1')
                    } else {
                        categoryPicList.push(response.url);
                    }
                });
                this.on("sending", function (file, xhr, formData) {
                    formData.append("filesize", file.size);
                });
                this.on("removedfile", function (file) {
                    var responseJson = null;
                    if (file && file.xhr && file.xhr.responseText) {
                        responseJson = $.parseJSON(file.xhr.responseText);
                    }
                    if (responseJson) {
                        $.each(categoryPicList, function (i, data) {
                            if (categoryPicList[i].indexOf(responseJson.url) > -1) {
                                categoryPicList.splice(i, 1);
                            }
                        });
                    }
                    if (file.name.length > 0) {
                        for (var i = 0; i < categoryPicList.length; i++) {
                            if (categoryPicList[i].indexOf(file.name) > -1) {
//                                $.post("delete_pic", {fileName: categoryPicList[i]}, function (result) {
//                                    if (result) {
//                                        console.log(categoryPicList[i] + '删除成功');
//                                    }
//                                });
                                categoryPicList.splice(i, 1);
                                break
                            }
                        }
                        console.log("文件 " + file.name + " 被移除");
                    }
                });
            }
        });

        bindEventer('introduce', 600);
        bindEventer('crowd', 600);

        $("#introduce, #crowd").trigger("keyup");
//            debugger
    });
</script>
</@body.page>
</html>